<template>
  <!-- 客户评价统计 -->
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel">
        <div class="search-panel">
          <el-form :inline="true" label-width="100" class="table-from-container">
            <el-form-item label="开始时间：">
              <el-date-picker
                v-model="query.startTime"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="结束时间：">
              <el-date-picker
                v-model="query.endTime"
                value-format="yyyy-MM-dd"
                type="date"
                :clearable="false"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="结果评分：">
              <el-select v-model="query.overallType" class="w-75">
                <el-option
                  v-for="(item, index) in selectData"
                  :key="index + '_select'"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
              <el-input v-model.number="query.overallEvaluation" oninput="value=value.replace(/[^\d]/g,'')" class="w-75" />
            </el-form-item>
            <el-form-item label="工程师评分：">
              <el-select v-model="query.disposalype" class="w-75">
                <el-option
                  v-for="(item, index) in selectData"
                  :key="index + '_select'"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
              <el-input v-model.number="query.disposalPersonnelEvaluation" oninput="value=value.replace(/[^\d]/g,'')" class="w-75" />
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 400px)"
            :data="tableData"
          >
            <el-table-column prop="departmentName" label="项目部" />
            <el-table-column prop="publisherName" label="发布人" />
            <el-table-column prop="responsibleName" label="负责人" />
            <el-table-column label="类型">
              <template slot-scope="scope">{{ getDictLabel('e005', scope.row.type) }}</template>
            </el-table-column>
            <el-table-column prop="zipCode" label="任务内容" />
            <el-table-column prop="overallEvaluation" label="对运维结果评价" />
            <el-table-column prop="disposalPersonnelEvaluation" label="对运维工程师评价" />
            <el-table-column prop="contentDescription" show-overflow-tooltip label="客户评价内容" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <Pagination
            v-show="query.total>0"
            :total="query.total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="initData"
          />
        </div>
      </div>
    </div>
    <DetailsDialog
      :dialog-visible="dialogVisible"
      :dialog-type="dialogType"
      :obj="obj"
      @closeDialog="dialogVisible = false"
    />
    <MaintenanceDetailDialog
      :dialog-visible="maintenanceDetailVisible"
      :obj="obj"
      @closeDialog="maintenanceDetailVisible = false"
    />
  </div>
</template>

<script>
import OutletTree from '@/components/Tree/outletTree'
import Pagination from '@/components/Pagination'
import { getList } from '@/api/business/evaluation'
import { getDatefmt, getConfigureContent } from '@/utils/common'
import { getDictLabel, parseTime } from '@/utils'
import DetailsDialog from './../alarm/historyAlarm/components/detailsDialog'
import MaintenanceDetailDialog from '@/views/maintenanceManage/components/MaintenanceDetailDialog'
export default {
  name: 'Evaluate',
  components: {
    Pagination, DetailsDialog, OutletTree, MaintenanceDetailDialog
  },
  data() {
    return {
      isWide: true,
      query: {
        departmentId: '',
        startTime: '',
        endTime: '',
        total: 0,
        page: 1,
        limit: 10,
        overallType: 1,
        overallEvaluation: '',
        disposalype: 1,
        disposalPersonnelEvaluation: ''
      },
      tableLoading: false,
      selectData: [
        { value: 0, label: '等于' },
        { value: 1, label: '大于' },
        { value: 2, label: '小于' }
      ],
      tableData: [],
      dialogVisible: false,
      maintenanceDetailVisible: false,
      dialogType: 'detail',
      obj: {
        id: ''
      }
    }
  },
  created() {
    this.setDate()
    this.initData()
  },
  mounted() {},
  methods: {
    getDictLabel, parseTime,
    initData() {
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      getList(query).then(res => {
        console.log(res)
        this.tableData = res.data.list.records
        this.query.total = res.data.list.total
        this.tableLoading = false
      })
    },
    handleNodeClick(data) {
      if (data.level === 1) {
        this.query.departmentId = data.id
      }
      this.handleSelect()
    },
    // 重置
    handleReset() {
      this.query = {
        departmentId: '',
        startTime: '',
        endTime: '',
        total: 0,
        page: 1,
        limit: 10,
        overallType: 1,
        overallEvaluation: '',
        disposalype: 1,
        disposalPersonnelEvaluation: ''
      }
      this.setDate()
      this.handleSelect()
    },
    // 导出
    handleExport() {},
    // 详情
    handleDetail(row) {
      if (row.type === 'e005_01') {
        this.dialogVisible = true
        this.obj.id = row.id
      } else if (row.type === 'e005_02') {
        this.maintenanceDetailVisible = true
        this.obj.id = row.id
      }
    },
    setDate() {
      const defaultTime = parseInt(getConfigureContent('e041_07'))
      const date = new Date()
      this.query.endTime = getDatefmt(date, 'yyyy-MM-dd')
      this.query.startTime = getDatefmt(new Date(date.getTime() - 3600 * 1000 * 24 * defaultTime), 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
